<template>
  <div class="index">
    <div class="header">
      <el-header>
        <div class="title">
          <img src="../assets/img/heima.b5a855ee.png" alt="" />
          <p>电商后台管理系统</p>
        </div>
        <el-button type="info" @click="logout">退出</el-button>
      </el-header>
    </div>
    <div class="mian">
      <el-aside :style="{ width: iscollapse ? '64px' : '200px' }">
        <el-row class="tac">
          <el-col :span="12">
            <el-button
              @click="iscollapse = !iscollapse"
              :style="{ width: iscollapse ? '64px' : '200px' }"
              ><i class="el-icon-s-grid"></i
            ></el-button>
            <el-menu
              :default-active="path === '/' ? path2 : path"
              background-color="#333744"
              text-color="#fff"
              active-text-color="#ffd04b"
              router
              :collapse="iscollapse"
              :collapse-transition="false"
              unique-opened
            >
              <el-submenu
                :index="item.path"
                v-for="(item, index) in menuList"
                :key="item.id"
                :style="{ width: iscollapse ? '64px' : '200px' }"
              >
                <template slot="title">
                  <i
                    :class="{
                      'el-icon-user': index === 0,
                      'el-icon-box': index === 1,
                      'el-icon-goods': index === 2,
                      'el-icon-tickets': index === 3,
                      'el-icon-s-platform': index === 4,
                    }"
                  ></i>
                  <span>{{ item.authName }}</span>
                </template>
                <el-menu-item
                  :index="'/' + item.path"
                  v-for="item in item.children"
                  :key="item.id"
                >
                  <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span slot="title">{{ item.authName }}</span>
                  </template>
                </el-menu-item>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <div class="right" :style="{ marginLeft: iscollapse ? '64px' : '200px' }">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
import { getMenus } from "@/api/user";
export default {
  name: "ShopIndex",
  data() {
    return {
      menuList: [],
      iscollapse: false,
      path2: "",
    };
  },
  async created() {
    const res = await getMenus();
    // console.log(res);
    this.menuList = res.data.data;
    const arr = this.$route.path.split("/");
    this.path2 = `/${arr[1]}`;
  },
  computed: {
    path() {
      const arr = this.$route.path.split("/");
      return `/${arr[0]}`;
    },
  },
  methods: {
    logout() {
      this.$store.commit("user/logout");
      this.$router.push("/login");
    },
  },
};
</script>
<style lang='less'  scoped>
.index {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999;
    height: 60px;
    .el-header {
      background-color: #373d41;
      color: #fff;
      text-align: center;
      line-height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        display: flex;
        p {
          margin-left: 15px;
          font-size: 20px;
        }
      }
      .el-button {
        width: 70px;
        height: 40px;
        margin-right: 20px;
      }
    }
  }
  .mian {
    margin-top: 60px;
    flex: 1;
    display: flex;
    .el-aside {
      position: fixed;
      left: 0;
      background-color: #333744;
      color: #fff;
      height: 100%;
      .el-button {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 24px;
        font-size: 24px;
        background: #4a5064;
        border: 0;
        color: #fff;
        transition: all 0s;
      }
    }
    .right {
      // margin-left: 200px;
      padding: 20px;
      flex: 1;
    }
  }
}
</style>
